// reset
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
}

// cube
@keyframes rotateY {
  from {
    transform: rotateX(-25deg) rotateY(0);
  }

  to {
    transform: rotateX(-25deg) rotateY(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotate(0deg);
  }
  100% {
    transform: rotateX(2turn) rotateY(1turn) rotate(1turn);
  }
}

.cube {
  --length: min(200px, 40vw, 40vh);
  --translate: calc(var(--length) / 2);
  --border: calc(var(--length) / 25);
  --bg-color: #ffffff;

  width: var(--length);
  height: var(--length);
  position: relative;
  box-sizing: border-box;
  transform-style: preserve-3d;
  animation: rotateY 6s linear infinite;

  .face {
    width: var(--length);
    height: var(--length);
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    box-sizing: border-box;
    transform-style: preserve-3d;
    transition: all 0.3s;

    &.front {
      transform: rotateY(0deg) translateZ(var(--translate));
    }

    &.back {
      transform: rotateY(180deg) translateZ(var(--translate));
    }

    &.left {
      transform: rotateY(-90deg) translateZ(var(--translate));
    }

    &.right {
      transform: rotateY(90deg) translateZ(var(--translate));
    }

    &.top {
      transform: rotateX(90deg) translateZ(var(--translate));
    }

    &.bottom {
      transform: rotateX(-90deg) translateZ(var(--translate));
    }

    &.bottom::after {
      content: '';
      position: absolute;
      background: rgba(0, 0, 0, 0.4);
      inset: 0;
      transform: translateZ(var(--translate));
      filter: blur(40px);
    }
  }
}
